import React, { memo, useState } from "react";
import { Route, Link, useHistory } from "react-router-dom";
import { GoodsDetailTopWrapper } from "./style";
import { Carousel, Image, Button, InputNumber, message } from "antd";
import { PlusOutlined, ShoppingOutlined } from "@ant-design/icons";
import storage from "@/utils/storage";
import { shopAddCart } from "@/service/shop";
export default memo(function TopInfo(props) {
  const { detail } = props;
  const history = useHistory();
  const [buyNum, setbuyNum] = useState(1);
  const [token, settoken] = useState(storage.get("token"));
  const baseInfo = detail.basicInfo;
  const contentStyle = {
    height: "160px",
    color: "#fff",
    lineHeight: "160px",
    textAlign: "center",
    background: "#364d79",
  };

  function InputNumberChange(value) {
    setbuyNum(value);
  }

  const addShopingClick = async () => {
    let obj = {
      goodsId: detail.basicInfo.id,
      number: buyNum,
      token,
    };
    const res = await shopAddCart(obj);
    if (res.code == 0) {
      message.success("购物车添加成功!");
    } else {
      message.error("购物车添加失败!");
    }
  };

  const addBuyClick = () => {
    history.push(
     `/OrdersConfirmPage?goodsId=${detail.basicInfo.id}&number=${buyNum}`
    );
    
  };
  return (
    <GoodsDetailTopWrapper>
      <div className="goods-detail-top-info">
        <div className="top-info-left">
          <Carousel className="Carousel" autoplay effect="fade">
            {detail.pics2 &&
              detail.pics2.map((item) => {
                return (
                  <div key={item}>
                    <Image width={300} src={item} />
                  </div>
                );
              })}
          </Carousel>
        </div>
        <div className="top-info-right">
          {baseInfo ? (
            <div className="itemInfo-wrap">
              <div className="name">{baseInfo.name}</div>
              <div className="tags">#{baseInfo.tags}</div>
              <div className="price">
                <div>
                  <span>现价</span>
                  <span className="current-price">
                    ￥{baseInfo.minPrice.toFixed(2)}
                  </span>
                </div>
                <div>
                  <span>原价</span>
                  <span className="original-price">
                    ￥{baseInfo.originalPrice.toFixed(2)}
                  </span>
                </div>

                <div>
                  <span>促销</span>
                  <span className="chuxiao">
                    {baseInfo.kanjia ? "优惠中" : "热销中"}
                  </span>
                </div>
              </div>
              <div className="other-info">
                <div>
                  <span>物流</span>
                  <span className="wuliu">一片月物流</span>
                </div>
              </div>
              <div className="buy">
                <InputNumber
                  min={1}
                  max={10}
                  defaultValue={1}
                  onChange={InputNumberChange}
                />
                <Button
                  onClick={() => addShopingClick()}
                  className="addShoping"
                  icon={<PlusOutlined />}
                  type="primary"
                  size="large"
                >
                  加入购物车
                </Button>
                <Button
                  onClick={() => addBuyClick()}
                  className="addBuy"
                  icon={<ShoppingOutlined />}
                  type="primary"
                  size="large"
                >
                  立即购买
                </Button>
              </div>
            </div>
          ) : (
            <div></div>
          )}
        </div>
      </div>
    </GoodsDetailTopWrapper>
  );
});
